<script>
/*
 * @Author: wzh 
 * @Date: 2020-12-30 21:15:45 
 * @Last Modified by: 1521620993@qq.com
 * @Last Modified time: 2020-12-30 21:23:06
 */
</script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10-文字环绕</title>
</head>
<body>
  <style>
    img{
      float: left;
      margin-right: 10px;
    }
    p{
      background-color: wheat;
    }
    p span{
      border: 2px solid blue;
      line-height: 3;
    }
  </style>
  <img src="./01.jpg" alt="">
  <p>
    <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam dolor eum quaerat ad aut repellendus expedita rem et, sed explicabo corrupti porro eveniet non nostrum repudiandae molestias odit nesciunt optio omnis aliquid. Aperiam neque dolores eaque numquam, suscipit maiores similique ab optio corporis iure quas sint iusto nihil inventore et placeat, perferendis natus, hic obcaecati! Accusamus corrupti reiciendis minima optio odit molestiae eos suscipit aliquid soluta eveniet. Dignissimos ipsam totam odit quasi velit quibusdam autem, molestias soluta hic optio doloribus ducimus quas vero, debitis aut dolores? Exercitationem impedit optio et placeat nam sapiente ex! Dicta suscipit itaque aliquam provident, hic laboriosam quod, repudiandae amet tempora commodi corrupti et consectetur optio? Beatae, cupiditate unde temporibus culpa perferendis totam commodi quo. Deleniti alias adipisci sequi quisquam earum ducimus dolor, incidunt quod, vitae consectetur iusto recusandae mollitia delectus in ut beatae tempore perferendis aut officia culpa quo repellat molestiae ratione repellendus? Dolorem magnam mollitia repellat laborum, in dolorum praesentium rem at aspernatur beatae. Ea sunt tempora veritatis, eius voluptates dolores molestias, quibusdam facilis dicta et, inventore odit distinctio consequatur! Magnam illo, libero, alias sed quisquam animi veniam consequatur, culpa reiciendis modi aspernatur! Harum ipsum placeat labore commodi officiis voluptatem, totam accusamus illo quam beatae laudantium ducimus magnam quaerat maiores sunt quae aliquid quo consectetur quod. Aut, non impedit itaque natus illum officia excepturi iste accusamus ipsam, repellendus doloremque dolorem maxime rem. Eligendi maiores nesciunt nemo fugiat ea! Harum enim, quo similique vitae saepe modi adipisci ipsum! Eius corrupti perspiciatis consectetur veniam quibusdam et beatae, id repudiandae sequi fuga ipsa animi culpa adipisci molestiae quam, natus quo odit iste, facere voluptatem corporis numquam. Distinctio cupiditate, culpa iusto labore harum, voluptatem suscipit tenetur ducimus quibusdam et nulla totam. Debitis eum dignissimos fugiat atque enim impedit perspiciatis, repudiandae at, iure vitae cupiditate ipsa id iste ullam.</span></p>
</body>
</html>